<template>
	<view class='goods-detail-index-containter'>
		<view class='goods-detail-title-containter'>
      <GoodsSwiper :presignedUrl="presignedUrl" :productIconUrl="goodsInfo.productIconUrl"/>
      <Connent :productName="goodsInfo.productName" @shareOn="shareOn"/>
      <PriceShare :currentPrice="goodsInfo.currentPrice" :originalPrice="goodsInfo.originalPrice" :shareTimes="shareTimes"/>
			<Series :productName="goodsInfo.productName" @showPop="showPop"/>
      <SelectTip :expressPrice="mallConfig.expressPrice" :expressLimit="mallConfig.expressLimit"/>
      <Evaluation :salesVolume="goodsInfo.salesVolume" :evaluationCount="goodsInfo.evaluationCount" :productId="productId" />
			<view class="goods-detail-connent-title">
				<image class="goods-detail-connent-title-bg" src="../../static/img/common/title_bg.png"></image>
				图文详情
			</view>
			<view class="detail_imgs" style="font-size:0px">
				<image @click="previewImage(item)" mode="widthFix" :key="index"
					v-for="(item, index) in goodsInfo.productDetailsUrl" class="icon-detail"
					:style="{ 'margin-top': index * -1 + 'px' }" :src="item">
				</image>
			</view>
			<view class="goods-detail-connent-title">
				<image class="goods-detail-connent-title-bg" src="../../static/img/common/title_bg.png"></image>
				内容简介
			</view>
			<view class="product_desc">
				<!-- <view v-html="goodsInfo.productDesc"></view> -->
				<!-- <view style="white-space: pre-wrap;">{{ goodsInfo.productDesc }}</view> -->
				<view v-for="(item, index) in goodsInfo.productDescArray" :key="index">{{ item }}</view>
			</view>
			<view class="product_desc">
				<view v-if="goodsInfo.author">
					作者：{{ goodsInfo.author }}
				</view>
				<view v-if="goodsInfo.publisher">
					出版社：{{ goodsInfo.publisher }}
				</view>
				<view v-if="goodsInfo.isbn">
					ISBN：{{ goodsInfo.isbn }}
				</view>
			</view>
			<HotRecommend></HotRecommend>
			<view class='goods-detail-tool-bar-containter'>
				<!--客服-->
				<!-- #ifdef MP-WEIXIN  -->
				<view class="control">
					<image class="icon" src="../../static/img/common/icon_service.png"></image>
					<view class="service txt">客服</view>
					<button class="btn_contact" open-type='contact'></button>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5  -->
				<view @click="callService" class="control">
					<image class="icon" src="../../static/img/common/icon_service.png"></image>
					<view class="service txt">客服</view>
				</view>
				<!-- #endif -->
				<!--首页-->
				<view class="control" @tap="onGotoHome">
					<image class="home icon" src="../../static/img/common/icon_home.png"></image>
					<view class="home txt">首页</view>
				</view>
				<!--购物车-->
				<view class="control" @tap="onGotoShoppingCart">
					<image class="cart icon" src="../../static/img/common/icon_cart.png"></image>
					<view class="cart txt">购物车</view>
				</view>
				<!--加入购物车-->
				<view class="common-btn-txt add-shopping-cart" @tap="onAddShoppingCart">加入购物车</view>
				<!--会员免费领-->
				<view class="common-btn-txt free-accept" @tap="showGoodsSelect">立即购买</view>
			</view>
			<!--商品规格选择面板-->
			<view v-if="enableGoodsSelect" class='goods-size-select-component-containter'>
				<view @tap="hideModal" class="panel_hide">

				</view>
				<view class="panel">
					<image class="close" src="../../static/img/common/btn_close.png" @tap="hideGoodsSelect">
					</image>
					<view class="panel-containter">
						<view class="goods-detail-1">
							<image class="icon-goods" :src="goodsInfo.productSquareUrl">
								<view class="title-containter">
									<view class="money">￥ {{ goodsInfo && goodsInfo.currentPrice }}</view>
									<!-- 	<view class="tip">{{tips}}</view> -->
								</view>
							</image>
						</view>
						<view class="goods-detail-3">
							<view class="dec">购买数量</view>
							<view class="count-component-containter">
								<view class="common_view_bg del" @tap="bindDel"> - </view>
								<view class="common_view_bg num"><input v-model.number="buyNum" @input="buyNumChange" />
								</view>
								<view class="common_view_bg add" @tap="bindAdd"> + </view>
							</view>
						</view>
						<view class="goods-detail-4">
							<view v-if="addCart" class="common-btn btn-add-cart" @tap="onAddCart">加入购物车</view>
							<view v-else class="common-btn btn-purchase" @tap="onPurchase">立即购买</view>
						</view>
					</view>
				</view>
			</view>
			<view class="share_modal" @tap="shareOff" v-if="showShare">
				<view class="share_row">
					<view><button style="font-size: 30rpx;" class="share_row_btn" open-type="share">发送给朋友</button>
					</view>
					<!-- <view @tap="posterOn">生成海报</view> -->
					<view @tap="shareOff" class="cancel_share">取消</view>
				</view>
			</view>
			<view class="share_modal poster" v-if="showPoster">
				<view class="poster_container">
					<view id='canvas-container'>
						<image @tap="posterOff" class="close_pic" src="../../static/img/common/btn_close.png">
						</image>
						<canvas canvas-id="myCanvas"
							style="width:80%;height:900rpx;margin: 0 auto;border-radius: 20rpx;overflow: hidden;" />
						<view class="save_poster" @tap="save">保存图片</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup background-color="#fff" ref="popupRef" type="bottom">
			<view class="coupon_pop">
				<view class="coupon_pop_out">
					<view class="">
						<view class="goods-detail-1">
							<image class="icon-goods" :src="goodsInfo.productSquareUrl">
								<view class="title-containter">
									<view class="money">￥ {{ goodsInfo && goodsInfo.currentPrice }}</view>
									<!-- 	<view class="tip">{{tips}}</view> -->
								</view>
							</image>
						</view>
						<view class="series_list">
							<view
								:class="['series_list_goods', item.productId == productId ? 'series_list_goods_select' : '']"
								:key="item.productId" v-for="item in seriesData" @tap="switchGoods(item.productId)">{{
									item.productName }}
							</view>
						</view>
						<view class="goods-detail-3">
							<view class="dec">购买数量</view>
							<view class="count-component-containter">
								<view class="common_view_bg del" @tap="bindDel"> - </view>
								<view class="common_view_bg num"><input maxlength="3" :controlled="true"
										v-model.number="buyNum" inputmode="numeric" @input="buyNumChange" type="digit" />
								</view>
								<view class="common_view_bg add" @tap="bindAdd"> + </view>
							</view>
						</view>
					</view>
					<view class="goods_action_pop">
						<view class="goods_action_pop_btn goods_action_pop_btn_cart" @tap="onAddCart">加入购物车</view>
						<view class="goods_action_pop_btn goods_action_pop_btn_buy" @tap="onPurchase">立即购买</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import Big from 'big.js';
import {
	common
} from '../../services/index.js';
import HotRecommend from '../components/hotRecommend/index.vue';
import GoodsSwiper from './GoodsSwiper.vue';
import Connent from './Connent.vue'
import PriceShare from './PriceShare.vue'
import Series from './Series.vue'
import Evaluation from './Evaluation.vue'
import SelectTip from './SelectTip.vue'

import {
	mapState,
} from "vuex";
import { cartUpdate } from '../../api/cart.js';
import { downloadFile, navigateBack, navigateTo, showLoading, showToast } from '../../utils/promise.js';
import { productQrcode, productQuery, productSeries } from '../../api/product.js';
import { shareQuery, record } from '../../api/share.js';
export default {
	data() {
		return {
			arrModuleData: {},
			goodsInfo: {
				productIconUrl: []
			},
			buyNum: 1,
			qrCode: '',
			showPoster: false,
			addCart: false, //是否加入购物车
			showShare: false, //是否展示分享
			productInfo: null, //商品信息
			enableGoodsSelect: false, //商品选择弹版是否有效
			curSelectedSizeDetailIndex: 0, //当前选中的规格数组下标
			selectGoodsCnt: 1, //选中的商品数量
			shareTimes: 0,
			productId: undefined,
			presignedUrl: null,
			seriesData: [],
		}
	},
	components: {
		HotRecommend,
    GoodsSwiper,
    Connent,
    PriceShare,
    Series,
    Evaluation,
    SelectTip
	},
	onLoad(params) {
		if (params.productId) {
			if(params.productId == 0){
				uni.switchTab({
					url: '/pages/index/index',
				})
			}else{
				this.productQuery(params.productId);
				this.getShareTimes(params.productId);
				this.getProductSeries(params.productId);
				this.productId = params.productId;
				// this.initQrCode(params.productId);
			}
		}
	},
	computed: {
		...mapState(["userInfo", 'userToken', "mallConfig"]),
	},
	mounted() {
	},
	methods: {
		callService() {
			window.flutter_inappwebview.callHandler('sxbookstore', "sxbookstore://book.rebook.com/function?cmd=customerService&data=" + JSON.stringify({ 'key': '客服' }) + "&callbackId=1&cbDispatcher=loginCallBack").then(function (res) {
			});
		},
		needLogin() {
			// uni.showToast({
			// 	title: '请登录',
			// 	icon: 'none',
			// });
			this.token = uni.getStorageSync("userToken")
			if (!this.token) {
				uni.showToast({
					icon: "error",
					title: '请先登录',
					duration: 1000,
					complete: () => {
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/HiltonHotelPage'
							})
						}, 1000)
					},
				})
				return
			}
			this.$store.commit('webViewLogin');
		},
		getProductSeries(productId) {
			let params = {
				product: productId
			}
			productSeries(params).then((res) => {
				// console.log(res)
				const {code, data, msg} = res
				if(code === 200) {
					this.seriesData = data
				}
			}).catch((err) => {
				console.log(err)
			})
		},
		productQuery(productId) {
			let params = {
				productId: productId
			}
			productQuery(params).then((res) => {
				const {code, data, msg} = res
				if(code === 200) {
					data.originalPrice = new Big(data.originalPrice).div(100);
					data.currentPrice = new Big(data.currentPrice).div(100);
					data.productDescArray = [];
					if (res.data.productDesc) {
						res.data.productDescArray = res.data.productDesc.split('\n');
					}
					this.goodsInfo = data;
					this.presignedUrl = data.presignedUrl;
				} else {
					showToast({
						title: "商品已下架"
					}).then(() => {
						setTimeout(() => {
							navigateBack()
						}, 3000)
					})
				}
			})
		},
		switchGoods(productId) {
			this.productId = productId;
			//this.seriesData = [];
			this.productQuery(productId);
			this.getShareTimes(productId);
			this.getProductSeries(productId);
			this.buyNum = 1;
		},
		initQrCode(productId) {
			let params = {
				productId: productId
			}
			productQrcode(params).then((res) => {
				const {code, data, msg} = res
				if(code === 200) {
					this.qrCode = data
				}
			})
		},
		onAddShoppingCart() {
			if (!this.userToken) {
				this.needLogin();
			} else {
				this.$refs.popupRef.open('bottom');
				//this.enableGoodsSelect = true;
				this.addCart = true;
				this.buyNum = 1;
			}

		},
		showGoodsSelect() {
			if (!this.userToken) {
				this.needLogin();
			} else {
				this.$refs.popupRef.open('bottom');
				//this.enableGoodsSelect = true;
				this.addCart = false;
				this.buyNum = 1;
			}
		},
		hideGoodsSelect() {
			this.enableGoodsSelect = false;
			this.addCart = false;
			this.buyNum = 1;
		},
		bindDel() {
			let buyNum = this.buyNum;
			if (buyNum < 2) {
				//showTxtToast("受不了宝贝再减少了");
				return
			}
			this.buyNum = buyNum - 1;
		},
		bindAdd() {
			let buyNum = this.buyNum;
			this.buyNum = buyNum + 1;
		},
		onGotoHome() {
			uni.switchTab({
				url: '/pages/ShoppingList/index',
			})
		},
		onGotoShoppingCart() {
			// uni.switchTab({
			// 	url: '/pages/shoppingCart/index',
			// })
			// 
			// TODO 购物车
			navigateTo({
				url: '/pages/shoppingCart/index',
			})
		},
		posterOn() {
			this.getAvaterInfo();
			this.showPoster = true;
			this.showShare = false;
		},
		posterOff() {
			this.showPoster = false;
		},
		shareOn() {
			// 显示分享面板
			this.showShare = true;
		},
		shareOff() {
			this.showShare = false;
		},
		hideModal(e) {
			this.enableGoodsSelect = false;
		},
		getShareTimes(productId) {
			// let res = await common.getShareTime(productId);
			// if (res.code === 200) {
			// 	this.shareTimes = res.data.shareTimes;
			// }
			let params = {
				productId: productId
			}
			shareQuery(params).then((res) => {
				const {code, data, msg} = res
				if(code === 200) {
					this.shareTimes = data.shareTimes;
				}
			}).catch((err) => {
				console.log(err)
			})
		},
		previewImage(img) {
			uni.previewImage({
				urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function (res) { },
				fail: function (res) { },
				complete: function (res) { },
			})
		},
		onPurchase() {
			let temp = this.goodsInfo;
			//正则判断一下 buyNum 是不是1-是不是1-999内的数字如果不是报错
			if (!/^\d{1,3}$/.test(this.buyNum)) {
				uni.showToast({
					title: '请输入正确的数量',
					icon: 'none',
				});
				return;
			}
			temp.count = this.buyNum;
			temp = [temp];//与购物车数据结构相同
			uni.setStorage({
				data: temp,
				key: 'purchaseItem',
			})
			navigateTo({
				url: "/pages/orderConfirm/index"
			})
		},
		//更新分享次数
		updateSharedTimes(data) {
			let goodsDetailTitleInfo = this.data.goodsDetailTitleInfo;
			goodsDetailTitleInfo = objectAssignmentBySameKey(goodsDetailTitleInfo, data);
			this.setData({
				goodsDetailTitleInfo
			});
		},
		//系统分享前，会先获取分享信息
		onShareAppMessage(res) {
			// 调用分享商品接口
			record({
				type: 2,
				sourceId: this.productId
			}).then(res => {
				console.log('分享商品成功', res);
			}).catch(err => {
				console.error('分享商品失败', err);
			});
            
			common.setSharetime(this.goodsInfo.productId);
			return {
			 	title: this.goodsInfo.productName,
			 	path: `pages/goodsDetail/index?productId=${this.goodsInfo.productId}`,
			 	imageUrl: this.goodsInfo.productSquareUrl
			}
		},
		buyNumChange(event) {
			//正则判断一下输入的内容 删掉除了数字的其他内容
			// let value = event.detail.value.replace(/[^\d]/g, '') || 1;
			// console.log(event.detail.value);
			// console.log(event.detail.value.replace(/[^\d]/g, ''));
			let value = event.detail.value;
			if(!value){
				value = 1;
			}
			//this.buyNum = Number(event.detail.value.replace(/[^\d]/g, ''));
			this.$nextTick(() => {
				this.buyNum = Number(value);
			});
			// setTimeout(() => {
			// 	this.buyNum = Number(value);
			// }, 100);
		},
		onAddCart() {
			//正则判断一下 buyNum 是不是3位数字如果不是报错
			if (!/^\d{1,3}$/.test(this.buyNum)) {
				uni.showToast({
					title: '请输入正确的数量',
					icon: 'none',
				});
				return;
			}
			let params = {
				productId: this.goodsInfo.productId,
				count: this.buyNum,
        random: '',
        sign: ''
			}
			cartUpdate(params).then((res) => {
				console.log(res)
				const {code, data, msg} = res
				if(code === 200) {
					showToast({
						title: "成功加入购物车"
					})
				}
			}).catch((err) => {
				console.log(err)
			})
			//this.onHide();
		},
		getAvaterInfo(cardInfo) { //cardInfo是传入的信息参数，按实际需要。
			downloadFile({
				url: "this.goodsInfo.productSquareUrl"
			}).then((res) => {
				if (res.statusCode === 200) {
					let goodsSrc = res.tempFilePath;
					this.getQrCode(goodsSrc, cardInfo)
				}
			})
		},
		getQrCode(goodsSrc, cardInfo) {
			uni.showLoading({
				title: '生成中...',
				mask: true,
			});
			var that = this;
			uni.downloadFile({
				url: this.qrCode,
				success: function (res) {
					if (res.statusCode === 200) {
						var codeSrc = res.tempFilePath;
						that.getLogoCode(cardInfo, goodsSrc, codeSrc);
					}
				}
			})
		},
		getLogoCode(cardInfo, goodsSrc, codeSrc,) {
			var that = this;
			let url = '';
			console.log(this.userInfo);
			if (this.userInfo.avatarUrl) {
				url = this.userInfo.avatarUrl;
			} else {
				url = 'https://test-1313267814.cos.ap-beijing.myqcloud.com/app/AVATAR/63a41b358fdfe88e0b896ac5.jpg'
			}
			uni.downloadFile({
				url: url,
				success: function (res) {
					uni.hideLoading();
					if (res.statusCode === 200) {
						var headImg = res.tempFilePath;
						that.sharePosteCanvas(cardInfo, goodsSrc, codeSrc, headImg); //真正的绘图方法
					}
				}
			})
		},
		sharePosteCanvas(cardInfo, goodsSrc, codeSrc, headImg) {
			cardInfo = {};
			uni.showLoading({
				title: '生成中...',
				mask: true,
			});
			var that = this;
			const ctx = uni.createCanvasContext('myCanvas');
			var width = "";
			uni.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {
				var height = 700;
				var right = rect.right;
				let nickName = that.userInfo.nickName ? that.userInfo.nickName : '希尔顿酒店'
				width = rect.width * 0.8;
				var left = rect.left + 5;
				ctx.setFillStyle('#fff');
				ctx.fillRect(0, 0, rect.width, height);
				ctx.drawImage(headImg, 20, 22, 40, 40);
				ctx.setFontSize(15);
				ctx.setFillStyle('#000');
				ctx.setTextAlign('left');
				ctx.fillText(nickName, 70, 40);
				ctx.setFontSize(11);
				ctx.setFillStyle('#999');
				ctx.setTextAlign('left');
				ctx.fillText('为你挑选了一个好物', 70, 58);
				ctx.drawImage(goodsSrc, left - 5, 64, width + 1, width);
				ctx.setFontSize(14);
				ctx.setFillStyle('#fff');
				ctx.setTextAlign('left');

				ctx.setFontSize(20);
				ctx.setFillStyle('#f71717');
				ctx.setTextAlign('left');
				ctx.fillText('￥' + that.goodsInfo.currentPrice, left + 25, width +
					100); //姓名

				if (that.goodsInfo.productName.length > 21) {
					that.goodsInfo.productName = that.goodsInfo.productName
						.slice(
							0, 21) + '...';
				}
				const CONTENT_ROW_LENGTH = 24; // 正文 单行显示字符长度
				let [contentLeng, contentArray, contentRows] = that.textByteLength(that
					.goodsInfo
					.productName, CONTENT_ROW_LENGTH);
				ctx.setTextAlign('left');
				ctx.setFillStyle('#111');
				ctx.setFontSize(12);
				let contentHh = 22 * 1;
				for (let m = 0; m < contentArray.length; m++) {
					ctx.fillText(contentArray[m], left + 34, width + 125 + contentHh * m);
				}

				//  绘制二维码cardInfo.CardInfo.QrCode
				if (codeSrc) {
					ctx.drawImage(codeSrc, left + 234, width + 80, width / 4.5, width / 4.5)
				}

			}).exec()

			setTimeout(() => {
				ctx.draw(); //这里有个需要注意就是，这个方法是在绘制完成之后在调用，不然容易其它被覆盖。
				uni.hideLoading();
			}, 1000)

		},
		textByteLength(text, num) { // text为传入的文本  num为单行显示的字节长度
			let strLength = 0; // text byte length
			let rows = 1;
			let str = 0;
			let arr = [];
			for (let j = 0; j < text.length; j++) {
				if (text.charCodeAt(j) > 255) {
					strLength += 2;
					if (strLength > rows * num) {
						strLength++;
						arr.push(text.slice(str, j));
						str = j;
						rows++;
					}
				} else {
					strLength++;
					if (strLength > rows * num) {
						arr.push(text.slice(str, j));
						str = j;
						rows++;
					}
				}
			}
			arr.push(text.slice(str, text.length));
			return [strLength, arr, rows] //  [处理文字的总字节长度，每行显示内容的数组，行数]
		},
		//保存
		save() {
			var that = this;
			uni.canvasToTempFilePath({ //canvas 生成图片 生成临时路径
				canvasId: 'myCanvas',
				success: function (res) {
					uni.saveImageToPhotosAlbum({ //下载图片
						filePath: res.tempFilePath,
						success: function () {
							uni.showToast({
								title: "保存成功",
								icon: "success",
							});
							that.setData({
								showPoster: false
							})
						}
					})
				}
			})
		},
		showPop() {
			this.$refs.popupRef.open('bottom');
		}
	},
}
</script>

<style scoped>
.goods-detail-index-containter {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

.bottom-space {
	width: 100%;
	height: 98rpx;
}

.share_modal {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}

.share_row {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
}

.share_row view {
	width: 100%;
	background-color: #fff;
	text-align: center;
	height: 100rpx;
	line-height: 100rpx;
}

.share_row_btn {
	height: 100rpx;
	line-height: 100rpx;
	background-color: #fff;
}

.share_row_btn::after {
	border-radius: none;
	border: none;
}

.cancel_share {
	border-top: 10rpx solid #ccc;
	height: 130rpx !important;
	line-height: 130rpx;
}

.poster {
	text-align: center;
}

.save_poster {
	margin: 60rpx auto 0;
	width: 200rpx;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 70rpx;
	border: 2rpx solid #fff;
	color: #fff;
	text-align: center;
}

.poster_container {
	text-align: center;
	margin-top: 130rpx;
}

.close_pic {
	position: absolute;
	width: 50rpx;
	height: 50rpx;
	right: 5%;
	top: -65rpx;
}

#canvas-container {
	position: relative;
}


.goods-detail-title-containter {
	position: relative;
	width: 100%;
	background-color: #fff;
	padding-bottom: 120rpx;
}

.money {
	font-size: 36rpx;
	font-weight: bold;
	color: rgba(242, 85, 0, 1);
}

.member .icon {
	width: 660rpx;
	height: 108rpx;
	background: rgba(255, 217, 217, 1);
	border-radius: 12rpx;
	margin-top: 30rpx;
}

/*商品详情页-操作栏*/
.goods-detail-tool-bar-containter {
	position: fixed;
	width: 100%;
	bottom: 0%;
	height: 120rpx;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.icon {
	width: 34rpx;
	height: 32rpx;
}

.txt {
	font-size: 24rpx;
	color: rgba(153, 153, 153, 1);
}

.control {
	width: 13.33333%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.btn_contact {
	position: absolute;
	left: 0%;
	bottom: 0%;
	width: 13.33333%;
	height: 98rpx;
	opacity: 0;
}

.common-btn-txt {
	width: 30%;
	height: 100%;
	color: #FFFFFF;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-shopping-cart {
	background: rgba(51, 51, 51, 1);
}

.free-accept {
	background: linear-gradient(90deg, rgba(242, 85, 0, 1) 0%, rgba(252, 67, 83, 1) 100%);
}

/*商品规格选择面板*/
goods-size-select-component {
	width: 100%;
	height: 100%;
	z-index: 2;
}

.goods-size-select-component-containter {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #0000006e;
}

.panel {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: inline-block;
	z-index: 1000;
}

.close {
	position: relative;
	width: 46rpx;
	height: 46rpx;
	margin-left: calc(100% - 46rpx - 20rpx);
	z-index: 1001;
}

.panel-containter {
	position: relative;
	margin-top: -36rpx;
	width: 100%;
	height: 100%;
	background: #fff;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.goods-detail-1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 180rpx;
	border-bottom: 1rpx solid #EFEFEF;
}

.icon-goods {
	width: 148rpx;
	height: 148rpx;
	margin: 0 35rpx;
}

.title-containter {
	width: calc(100% - 148rpx - 70rpx - 35rpx);
}



.tip {
	font-size: 24rpx;
	color: rgba(51, 51, 51, 1);
}

.item {
	display: inline-block;
	text-align: center;
	border-radius: 10rpx;
	padding: 10rpx 15rpx;
	margin: 10rpx 20rpx;
	font-size: 26rpx;
	background-color: #fff;
}

.goods-detail-3 {
	width: 90%;
	height: 118rpx;
	border-bottom: 1rpx solid #EFEFEF;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.dec {
	font-size: 28rpx;
	text-align: center;
}

.goods-detail-4 {
	width: 100%;
	height: 130rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

}

.common-btn {
	width: 50%;
	height: 98rpx;
	text-align: center;
	font-size: 32rpx;
	line-height: 98rpx;
}

.btn-add-cart {
	height: 130rpx;
	line-height: 130rpx;
	width: 100%;
	color: #fff;
	background: linear-gradient(90deg, rgba(242, 85, 0, 1) 0%, rgba(252, 67, 83, 1) 100%);
}

.btn-purchase {
	height: 130rpx;
	line-height: 130rpx;
	width: 100%;
	color: #fff;
	background: linear-gradient(90deg, rgba(242, 85, 0, 1) 0%, rgba(252, 67, 83, 1) 100%);
}

.count-component-containter {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
}

.count-component-containter .common_view_bg {
	min-width: 56rpx;
	font-weight: 500;
	background: rgba(242, 242, 242, 1);
	color: rgba(102, 102, 102, 1);
	line-height: 48rpx;
	font-size: 26rpx;
	border: 1rpx solid #fff;
	text-align: center;
}

.count-component-containter .del,
.add {
	height: 56rpx;
}

.count-component-containter .num {
	line-height: 56rpx;
	display: inline-block;
}

.count-component-containter .num input {
	width: 50rpx;
	margin: 0 10rpx;
	height: 56rpx;
}

.panel_hide {
	width: 100%;
	height: 100vh;
	z-index: 1;
}

.goods-detail-connent-title {
	background-color: #fff;
	text-align: center;
	padding: 20rpx 0;
	position: relative;
	height: 50rpx;
	font-size: 32rpx;
}

.goods-detail-connent-title-bg {
	width: 315rpx;
	height: 48rpx;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 8rpx;
}

.icon-detail {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
}

.coupon_pop {
	padding: 30rpx;
	box-sizing: border-box;
}

.coupon_pop_out {
	height: 650rpx;
	overflow: auto;
	padding-bottom: 120rpx;
}

.goods_action_pop {
	position: fixed;
	bottom: 0;
	display: flex;
	width: 90%;
	justify-content: space-around;
	background-color: #fff;
	z-index: 100;
}

.goods_action_pop_btn {
	width: 45%;
	border-radius: 20rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	margin-bottom: 40rpx;
	color: #fff;
}

.goods_action_pop_btn_buy {
	background: linear-gradient(90deg, rgba(242, 85, 0, 1) 0%, rgba(252, 67, 83, 1) 100%);
}

.goods_action_pop_btn_cart {
	background: rgba(51, 51, 51, 1);
}

.series_list {
	display: flex;
	margin: 30rpx 0;
	flex-wrap: wrap;
}

.series_list_goods {
	border-radius: 20rpx;
	padding: 15rpx 20rpx;
	background-color: rgba(232, 232, 232, 0.3);
	margin-right: 20rpx;
	border: 1px solid transparent;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	font-size: 28rpx;
}

.series_list_goods_select {
	border-color: rgba(242, 85, 0, 1);
	color: rgba(242, 85, 0, 1);
}

.detail_imgs {
	font-size: 0;
}

.product_desc {
	padding: 10rpx 30rpx;
	text-indent: 2em;
	text-align: justify;
}
</style>
